<template>
  <div>
  <div class="header" >
  <div class="loginImg">
    <img src="../../../../assets/imgs/logo1.png" alt />
  </div>
 <img class="image_close" src="../../../../assets/imgs/header_close.png" alt @click="back"/>		
  </div>	  
  <div class="linetop"></div>
 <div class="title">{{$t('vr.clues1')}}</div>		
  <div class="title1">{{$t('vr.clues')}}</div>
  <div class="title1">{{ $t("vr.clues4") }}</div>
  <!-- <div class="title">{{$t('vr.clues2')}}</div>    -->
  <!-- <div class="title">{{$t('vr.clues3')}}</div> -->
  <div class="line"></div>
  <div v-for="(item, index) in expertsList" :key="index" >
   <div>
	<a  class="itemmeetingroom" :href="item.url">{{item.name}}</a>
	<div  class="itemlinkroom">
		<a :href="item.url" class="linkcolor">{{$t('vr.jumpclues')}}</a>
	</div>   
   </div>	  
  </div>	  
  </div>		 
</template>

<script>
import api from 'servicePath/index'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      expertsList: []
    }
  },
  computed: {
    ...mapState(['lang']),
  },
  mounted () {
    // 初始化获取专家数据
    this.handleGetExpertsList()
  },
  methods: {
    // 获取专家列表
    async handleGetExpertsList () {
      const params = {
        language: this.lang
      }
      const res = await api.getExpertsList(params)
      this.expertsList = res.data
      console.log(res)
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.header{
display: flex;
justify-content: space-between;
width: 100%;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}	
.loginImg {
    img {
      height: 26px;
      vertical-align: middle;
    }
  }	
.image_close{
width: 22px;
height: 22px;	

}  
.title{
margin-top:10px;
padding-left: 20px;
padding-right: 20px;		
width: 100%;
font-size: 15px;
font-weight: 500;
color: #020202;
line-height: 21px;		
}
.title1{
padding-left: 20px;
padding-right: 20px;		
width: 100%;
font-size: 15px;
font-weight: 500;
color: #020202;
line-height: 21px;		
}
.line{
width: 100%;
height: 1px;
background: #e8e8e8;
margin-top:20px;
}
.linetop{
width: 100%;
height: 1px;
background: #e8e8e8;
}
.itemmeetingroom{
margin-top: 20px;	
padding-left: 20px;
padding-right: 20px;
width: 100%;
font-size: 14px;
font-weight: 500;
color: #020202;
line-height: 15px;	
display:inline-block;
vertical-align: middle;	
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.itemlinkroom{
padding-left: 20px;
padding-right: 20px;	
width: 100%;	
font-size: 12px;
font-weight: 500;
color: #9B9B9B;
line-height: 15px;	
display:inline-block;
vertical-align: middle;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

}
.linkcolor{
color: #009FE4;	
}	
</style>